<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>BC显示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="css/app.css"/>

    <link href="css/mui.picker.css" rel="stylesheet"/>
    <link href="css/mui.poppicker.css" rel="stylesheet"/>
    <link href="css/baiyi.css" rel="stylesheet">
    <script src="js/angular.min.js"></script>
</head>

<body ng-app="steelStruct" ng-controller="steelCtrl">

<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item" href="index.html">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" href="quotation.html">
        <span class="mui-icon mui-icon-compose"></span>
        <span class="mui-tab-label">报价单</span>
    </a>
    <a class="mui-tab-item mui-active">
        <span class="mui-icon mui-icon-settings"></span>
        <span class="mui-tab-label">钢结构图纸</span>
    </a>
    <a class="mui-tab-item" href="dRendering.html">
        <span class="mui-icon mui-icon-starhalf"></span>
        <span class="mui-tab-label">动态效果</span>
    </a>
    <a class="mui-tab-item" href="personalCenter.html">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">个人中心</span>
    </a>
</nav>

<div class="mui-content">

    <div id="steelStruct" class="mui-control-content mui-active">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-pull-left headA" href="javascript:void(0)" ng-click="download3d()">3D下载</a>
            <h1 class="mui-title" style="left: 80px;right: 80px;">钢结构图纸</h1>
            <a class="mui-pull-right headA" href="javascript:void(0)" ng-click="download2d()">2D下载</a>
        </header>

        <div class="mui-content-padded">

            <div class="headMarginTop"></div>

            <div class="mui-row">
                <div class="mui-col-xs-6 alignCenter">产品型号：{{modelName}}</div>
                <div class="mui-col-xs-2">宽：{{width}}</div>
                <div class="mui-col-xs-2">高：{{height}}</div>
            </div>

            <div id="3d" class="border">
                <h5>3D:</h5>
                <iframe id="3d_iframe" width="100%" height="200" class="all-iframe" src="{{srcUrl}}" frameborder="0"></iframe>
            </div>

            <div class="border marginTop">
                <h5>正面包边:</h5>
                <!--<img src="img/back.png" class="imageScale">-->
                <iframe id="zmbb_iframe" width="100%" height="200" class="all-iframe" src="{{zhengmianbaobianUrl}}" frameborder="0"></iframe>
            </div>

            <div class="border marginTop">
                <h5>正面:</h5>
                <!--<img src="img/back.png" class="imageScale">-->
                <iframe id="zm_iframe" width="100%" height="200" class="all-iframe" src="{{zhengmianUrl}}" frameborder="0"></iframe>
            </div>

            <div class="border marginTop">
                <h5>侧面:</h5>
                <iframe id="cm_iframe" width="100%" height="200" class="all-iframe" src="{{cemianUrl}}" frameborder="0"></iframe>
            </div>

            <div class="border marginTop">
                <h5>反面:</h5>
                <iframe id="fm_iframe" width="100%" height="200" class="all-iframe" src="{{fanmianUrl}}" frameborder="0"></iframe>
            </div>

            <div class="border marginTop">
                <h5>屏幕:</h5>
                <iframe id="pm_iframe" width="100%" height="200" class="all-iframe" src="{{pingmuUrl}}" frameborder="0"></iframe>
            </div>
        </div>

    </div>

</div>

</body>

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="globalVar.js"></script>

<script src="js/html2canvas.js"></script>

<script>

    mui.init({
        swipeBack: false //启用右滑关闭功能
    });


    var app = angular.module('steelStruct', []);
    app.controller('steelCtrl', function($scope,$http) {

        $scope.width = "";
        $scope.height = "";
        $scope.modelName = "";
        $scope.token = "";
        $scope.modelId = "";

        var width = localStorage.getItem("width");
        var height = localStorage.getItem("height");
        var modelName = localStorage.getItem("modelName");
        var modelId = localStorage.getItem("modelId");

        if (width === null) {
            $scope.width = 5;
        } else {
            $scope.width = width;
        }
        if (height === null) {
            $scope.height = 5;
        } else {
            $scope.height = height;
        }
        if (modelName === null) {
            $scope.modelName = "P8";
        } else {
            $scope.modelName = modelName
        }
        if (modelId === null) {
            $scope.modelId = 1;
        } else {
            $scope.modelId = modelId
        }
        $scope.token = localStorage.getItem("token");



        $http({
            method: "GET",
            url: url + "/product/types?token="+$scope.token,
        }).then(
            function success(response) {

            },
            function error(response) {
                location.href = "login.html";
            }
        );
        if (parseInt($scope.modelId) === 1 || parseInt($scope.modelId) === 2) {
            $scope.productId = 1;
        }else {
            $scope.productId = 2;
        }
        console.log("productid:"+$scope.productId);
        $scope.srcUrl = "product3d/product3d.html?width=" + $scope.width + "&height=" + $scope.height;
        $scope.zhengmianUrl = "product/"+$scope.productId+"/zhengmian.html?width=" + $scope.width + "&height=" + $scope.height;
        $scope.zhengmianbaobianUrl = "product/"+$scope.productId+"/zhengmian_baobian.html?width=" + $scope.width + "&height=" + $scope.height;
        $scope.cemianUrl = "product/"+$scope.productId+"/cemian.html?width=" + $scope.width + "&height=" + $scope.height;
        $scope.fanmianUrl = "product/"+$scope.productId+"/fanmian.html?width=" + $scope.width + "&height=" + $scope.height;
        $scope.pingmuUrl = "product/"+$scope.productId+"/pingmu.html?width=" + $scope.width + "&height=" + $scope.height;


        function downloadFile(url) {
            try{
                var elemIF = document.createElement("iframe");
                elemIF.src = url;
                elemIF.style.display = "none";
                document.body.appendChild(elemIF);
            }catch(e){
                location.href = "login.html";
            }
        }

        $scope.download3d = function () {
            $scope.modelName = $scope.modelName.substring($scope.modelName.length-2,$scope.modelName.length);
            var btnArray = ['否', '是'];
            mui.confirm('是否下载', '钢结构3D图纸下载', btnArray, function(e) {
                if (e.index == 1) {
                    mui.toast('正在生成图片，请等待');
                    setTimeout(function () {
                        var downloadBasePath = url + "/download/steelStructDownload3d?token=" + $scope.token +
                            "&width=" + $scope.width + "&height=" + $scope.height + "&modelName=" + $scope.modelName;

                        downloadFile(downloadBasePath);
                    }, 100);
                } else {

                }
            })
        };



        $scope.download2d = function download() {
            $scope.modelName = $scope.modelName.substring($scope.modelName.length-2,$scope.modelName.length);
            var btnArray = ['否', '是'];
            mui.confirm('是否下载', '钢结构2D图纸下载', btnArray, function(e) {
                if (e.index == 1) {
                    mui.toast('正在生成图片，请等待');
                    setTimeout(function () {
                        var data = {
                            "zmIframe":$("#zm_iframe").contents().find("body").html(),
                            "zmbbIframe":$("#zmbb_iframe").contents().find("body").html(),
                            "cmIframe":$("#cm_iframe").contents().find("body").html(),
                            "fmIframe":$("#fm_iframe").contents().find("body").html(),
                            "pmIframe":$("#pm_iframe").contents().find("body").html()
                        };
                        $http({
                            method: "POST",
                            url: url + "/download/steelStruct?token="+$scope.token + "&productId="
                            + $scope.modelId + "&width="
                            + $scope.width + "&height=" + $scope.height + "&modelName=" + $scope.modelName,
                            data: data
                        }).then(
                            function success(response) {
                                /*console.log(response.data);*/
                                if (response.data.success){
                                    var downloadPath = url + "/download/steelStructDownload?token=" + $scope.token + "&productId="
                                        + $scope.modelId + "&width="
                                        + $scope.width + "&height=" + $scope.height + "&modelName=" + $scope.modelName;
                                    downloadFile(downloadPath);
                                }else {
                                    alert(response.data.msg);
                                }
                            },
                            function error(response) {
                                location.href = "login.html";
                            }
                        );
                    }, 2000);
                } else {

                }
            })
        }
    });

    //导航
    mui('body').on('click', 'a', function () {
        document.location.href = this.href;
    });



</script>
</html>